<template>
    <div>
        <div class="box">
            <div class="fan">
                <router-link :to="{ name: 'login' }">
                    <el-button type="success">返回</el-button>
                </router-link>
            </div>
            <h1>学生信息平台注册</h1>
            <div>
                <el-input placeholder="请输入用户名" v-model="form.name" clearable>
                </el-input><br>
                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input><br>
                <el-input placeholder="请再次输入密码" v-model="form.pass_repeate" show-password></el-input>
            </div>
            <el-row>
                <el-button type="info">找回密码</el-button>
                <el-button type="primary" @click="registers">注册</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
import { Message } from "element-ui";
import { req_register } from "../api/users";
export default {
    data() {
        return {
            form: {
                name: '',
                password: '',
                pass_repeate: ""
            }
        }
    },
    methods: {
        async registers() {
            if (this.form.password == this.form.pass_repeate) {
                await req_register({
                    method:'post',
                    url:'/register',
                    arg:{
                        user_name:this.form.name,
                        password:this.form.password
                    },
                    headerType:'form',
                })
                this.$router.push({
                    name:'login'
                })
            } else {
                Message({
                    type: "warning",
                    message: "请重新输入密码",
                });
                // 将密码和重复密码的输入空清空
                this.form.password = "";
                this.form.pass_repeate = "";
            }
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.box {
    height: 610px;
    background-image: url('~@a/img/bg.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;

    .el-input {
        width: 300px;
        margin: 10px;
    }

    .el-row {
        .el-button {
            width: 100px;
        }
    }

    .fan {
        position: absolute;
        left: 30px;
        top: 10px;

        .el-button {
            color: black;
        }
    }
}
</style>